/**
 * @description 登录页面对应的属性组件
 */

import { Collapse, Form, Select, Input, Radio, Tooltip } from 'antd';
import {
  InfoCircleOutlined
} from '@ant-design/icons';
import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { AntIConTip, AntUrl, iconTextReg } from '@/utils/Const';
import AnimateOptions from '@/components/StylesWrapper/AnimateOptions.js';
import { setAttrForm } from '@/utils/AttrForm';
import { copyTemplate, pasteTemplate } from '@/utils/clipboard';
import { UpdateContext } from '@/store/updateContext';

import FileUpload from '@/components/StylesWrapper/FileUpload';
import AbIcon from '@/components/DecorateIcons/Ab_Icon';
import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';

// 背景类型的选项
const bgOptions = [
  {
    value: '1',
    label: '默认背景',
  },
  // {
  //   value: '2',
  //   label: '动画背景',
  // },
  // {
  //   value: '3',
  //   label: '视频背景',
  // },
  // {
  //   value: '4',
  //   label: '轮播背景',
  // },
]

// 表单布局
const layoutOption = [
  {
    value: 'horizontal',
    label: '水平'
  },
  {
    value: 'vertical',
    label: '垂直'
  },
]

// 标题和后缀现实的开关
const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]

// 行为验证码的选项
const verifyThemeOptions = [
  {
    value: 'light',
    label: '白色'
  },
  {
    value: 'dark',
    label: '黑色'
  },
]



function LoginAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef();

  // 更新style样式文件
  let upateStyleEvent = (keys) => {

    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }
  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }
  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------

  let items = useMemo(() => {
    const items = [
      {
        key: 'bg',
        label: '背景',
        children:
          <Collapse accordion size='middle' items={[
            {
              key: 'type',
              label: '背景配置',
              children:
                <>
                  <Form.Item
                    label="背景类型"
                    name={['base', 'bg_type']}
                  >
                    <Select
                      options={bgOptions}
                    >
                    </Select>
                  </Form.Item >
                  <FileUpload form={form} label='背景图片' name={['base', 'background_image']} onConfigEvent={onConfigEvent} />
                </>


            },
            {
              key: 'bg',
              label: '默认背景属性',
              children: <StyleWrapper form={form} preKeys={['bg', 'default']} onStyleChange={() => upateStyleEvent(['bg'])} />,
            }
          ]}
          />
      },
      {
        key: 'form',
        label: '表单盒子',
        children:
          (
            <>
              <Form.Item
                label="动画属性"
                name={['base', 'form_animate']}
              >
                <Select
                  allowClear
                  options={AnimateOptions}
                  onChange={(value) => onConfigEvent(['base', 'form_animate'], value)}
                />
              </Form.Item>
              <Form.Item
                label="布局"
                name={['base', 'form_layout']}
              >
                <Radio.Group
                  options={layoutOption}
                  onChange={(e) => onConfigEvent(['base', 'form_layout'], e.target.value)}
                  optionType="button"
                  buttonStyle="solid"
                />
              </Form.Item>

              <StyleWrapper form={form} preKeys={['form', 'default']} onStyleChange={() => upateStyleEvent(['form'])} />
            </>

          )
        ,
      },
      {
        key: 'form_wrapper',
        label: '表单盒子2',
        children: <StyleWrapper form={form} preKeys={['form_wrapper', 'default']} onStyleChange={() => upateStyleEvent(['form_wrapper'])} />,
      },
      {
        key: 'title',
        label: '标题',
        children:
          <>

            <Form.Item
              label="开关"
              name={['base', 'title_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'title_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="后缀"
              name={['base', 'title_suffixFlag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'title_suffixFlag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="后缀文字"
              name={['base', 'title_suffix']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'title_suffix'], e.target.value)}
              />
            </Form.Item>

            <StyleWrapper form={form} preKeys={['title', 'default']} onStyleChange={() => upateStyleEvent(['title'])} />

          </>
      },

      {
        key: 'input',
        label: '输入框',
        children:
          <Collapse accordion size='middle' items={[
            {
              key: 'item',
              label: 'item盒子',
              children: <StyleWrapper form={form} preKeys={['item', 'default']} onStyleChange={() => upateStyleEvent(['item'])} />,
            },
            {
              key: 'label',
              label: '标签',
              children:
                <Collapse accordion defaultActiveKey="type" size='middle' items={[
                  {
                    key: 'box',
                    label: '盒子',
                    children:
                      <>
                        <Form.Item
                          label="开关"
                          name={['base', 'label_flag']}
                        >
                          <Radio.Group
                            options={titleShowOptions}
                            onChange={(e) => onConfigEvent(['base', 'label_flag'], e.target.value)}
                            optionType="button"
                            buttonStyle="solid"
                          />
                        </Form.Item>

                        <StyleWrapper form={form} preKeys={['label', 'default']} onStyleChange={() => upateStyleEvent(['label'])} />

                      </>
                  },
                  {
                    key: 'text',
                    label: '文本',
                    children:
                      <>
                        <Form.Item
                          label="文本开关"
                          name={['base', 'text_flag']}
                        >
                          <Radio.Group
                            options={titleShowOptions}
                            onChange={(e) => onConfigEvent(['base', 'text_flag'], e.target.value)}
                            optionType="button"
                            buttonStyle="solid"
                          />
                        </Form.Item>

                        <Form.Item
                          label="账号文本"
                          name={['base', 'text1']}
                        >
                          <Input
                            onChange={(e) => onConfigEvent(['base', 'text1'], e.target.value)}
                          />
                        </Form.Item>
                        <Form.Item
                          label="密码文本"
                          name={['base', 'text2']}
                        >
                          <Input
                            onChange={(e) => onConfigEvent(['base', 'text2'], e.target.value)}
                          />
                        </Form.Item>
                        <Form.Item
                          label="验证码文本"
                          name={['base', 'text3']}
                        >
                          <Input
                            onChange={(e) => onConfigEvent(['base', 'text3'], e.target.value)}
                          />
                        </Form.Item>
                        <Form.Item
                          label="角色文本"
                          name={['base', 'text4']}
                        >
                          <Input
                            onChange={(e) => onConfigEvent(['base', 'text4'], e.target.value)}
                          />
                        </Form.Item>
                        <StyleWrapper form={form} preKeys={['label_text', 'default']} onStyleChange={() => upateStyleEvent(['label_text'])} />

                      </>
                  },
                  {
                    key: 'icon',
                    label: '图标',
                    children:
                      <>
                        <Form.Item
                          label="图标开关"
                          name={['base', 'icon_flag']}
                        >
                          <Radio.Group
                            options={titleShowOptions}
                            onChange={(e) => onConfigEvent(['base', 'icon_flag'], e.target.value)}
                            optionType="button"
                            buttonStyle="solid"
                          />
                        </Form.Item>
                        <Form.Item
                          label="账号图标"
                          name={['base', 'icon1']}
                        >
                          <Input
                            onChange={(e) => iconEvent(['base', 'icon1'], e.target.value)}
                            addonBefore={<AbIcon iconName={template2.base.icon1} />}
                            suffix={
                              <Tooltip title={AntIConTip}>
                                <InfoCircleOutlined
                                  style={{
                                    color: 'rgba(0,0,0,.45)',
                                  }}
                                  onClick={() => window.open(AntUrl, "_blank")}
                                />
                              </Tooltip>
                            }
                          />
                        </Form.Item>
                        <Form.Item
                          label="密码图标"
                          name={['base', 'icon2']}
                        >
                          <Input
                            onChange={(e) => iconEvent(['base', 'icon2'], e.target.value)}
                            addonBefore={<AbIcon iconName={template2.base.icon2} />}
                          />
                        </Form.Item>
                        <Form.Item
                          label="验证码图标"
                          name={['base', 'icon3']}
                        >
                          <Input
                            onChange={(e) => iconEvent(['base', 'icon3'], e.target.value)}
                            addonBefore={<AbIcon iconName={template2.base.icon3} />}
                          />
                        </Form.Item>
                        <Form.Item
                          label="角色图标"
                          name={['base', 'icon4']}
                        >
                          <Input
                            onChange={(e) => iconEvent(['base', 'icon4'], e.target.value)}
                            addonBefore={<AbIcon iconName={template2.base.icon4} />}
                          />
                        </Form.Item>
                        <StyleWrapper form={form} preKeys={['label_icon', 'default']} onStyleChange={() => upateStyleEvent(['label_icon'])} />

                      </>
                  },

                ]} />
            },
            {
              key: 'input',
              label: '账号和密码',
              children:
                <Collapse accordion size='middle' items={[
                  {
                    key: 'input',
                    label: '账号和密码',
                    children:
                      <StyleWrapper form={form} preKeys={['input', 'default']} onStyleChange={() => upateStyleEvent(['input'])} />,
                  },
                  {
                    key: 'focus',
                    label: '聚焦',
                    children:
                      <StyleWrapper form={form} preKeys={['input', 'focus']} onStyleChange={() => upateStyleEvent(['input'])} />,
                  },
                  {
                    key: 'input-icon',
                    label: '图标',
                    children:
                      <StyleWrapper form={form} preKeys={['input_icon', 'default']} onStyleChange={() => upateStyleEvent(['input_icon'])} />,
                  },
                  {
                    key: 'input-icon-hover',
                    label: '图标-hover',
                    children:
                      <StyleWrapper form={form} preKeys={['input_icon', 'hover']} onStyleChange={() => upateStyleEvent(['input_icon'])} />,
                  },
                ]} />
            },
            {
              key: 'code',
              label: '验证码',
              children:
                <Collapse accordion size='middle' items={[
                  {
                    key: 'code',
                    label: '验证码',
                    children:
                      <StyleWrapper form={form} preKeys={['code', 'default']} onStyleChange={() => upateStyleEvent(['code'])} />

                  },
                  {
                    key: 'code_foucs',
                    label: '聚焦',
                    children:
                      <StyleWrapper form={form} preKeys={['code', 'focus']} onStyleChange={() => upateStyleEvent(['code'])} />
                  },
                  {
                    key: 'code_num',
                    label: '右侧code',
                    children:
                      <StyleWrapper form={form} preKeys={['code_num', 'default']} onStyleChange={() => upateStyleEvent(['code_num'])} />
                  },
                ]} />
            },
            {
              key: 'role',
              label: '角色',
              children:
                <Collapse accordion size='middle' items={[
                  {
                    key: 'role',
                    label: '角色',
                    children:
                      <StyleWrapper form={form} preKeys={['role', 'default']} onStyleChange={() => upateStyleEvent(['role'])} />
                  },
                  {
                    key: 'focus',
                    label: '聚焦',
                    children:
                      <StyleWrapper form={form} preKeys={['role', 'focus']} onStyleChange={() => upateStyleEvent(['role'])} />
                  },
                  {
                    key: 'role-icon',
                    label: '图标',
                    children:
                      <StyleWrapper form={form} preKeys={['role_icon', 'default']} onStyleChange={() => upateStyleEvent(['role_icon'])} />
                  },
                ]} />
            },
            {
              key: 'placeholder',
              label: '输入框的提示语',
              children: <StyleWrapper form={form} preKeys={['input_placeholder', 'default']} onStyleChange={() => upateStyleEvent(['input_placeholder'])} />,
            },
            {
              key: 'input_error',
              label: '输入框错误时(公共)',
              children:
                <StyleWrapper form={form} preKeys={['input_error', 'default']} onStyleChange={() => upateStyleEvent(['input_error'])} />
            }
          ]} />
      },

      {
        key: 'verify',
        label: '行为验证码',
        children:
          <>
            <Form.Item
              label="主题"
              name={['base', 'verify_theme']}
            >
              <Select
                options={verifyThemeOptions}
                onChange={(value) => onConfigEvent(['base', 'verify_theme'], value)}
              >
              </Select>
            </Form.Item >

            <FileUpload form={form} label='图片' name={['base', 'verify_imgUrl']} onConfigEvent={onConfigEvent} />

          </>
      },

      {
        key: 'btn',
        label: '按钮',
        children:
          <Collapse accordion size='middle' items={[
            {
              key: 'btn_box',
              label: '盒子',
              children:
                <StyleWrapper form={form} preKeys={['btn_box', 'default']} onStyleChange={() => upateStyleEvent(['btn_box'])} />
            },
            {
              key: 'register_box',
              label: '注册盒子',
              children:
                <>
                  <Form.Item
                    label="文本"
                    name={['base', 'register_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['base', 'register_text'], e.target.value)}
                    />
                  </Form.Item>

                  <StyleWrapper form={form} preKeys={['register_box', 'default']} onStyleChange={() => upateStyleEvent(['register_box'])} />

                </>
            },
            {
              key: 'register',
              label: '注册',
              children:
                <StyleWrapper form={form} preKeys={['register', 'default']} onStyleChange={() => upateStyleEvent(['register'])} />
            },
            {
              key: 'register_hover',
              label: '注册hover',
              children:
                <StyleWrapper form={form} preKeys={['register', 'hover']} onStyleChange={() => upateStyleEvent(['register'])} />
            },
            {
              key: 'forget_box',
              label: '忘记密码盒子',
              children:
                <>
                  <Form.Item
                    label="文本"
                    name={['base', 'forget_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['base', 'forget_text'], e.target.value)}
                    />
                  </Form.Item>

                  <StyleWrapper form={form} preKeys={['forget_box', 'default']} onStyleChange={() => upateStyleEvent(['forget_box'])} />

                </>
            },
            {
              key: 'forget',
              label: '忘记密码',
              children:
                <StyleWrapper form={form} preKeys={['forget', 'default']} onStyleChange={() => upateStyleEvent(['forget'])} />
            },
            {
              key: 'forget_hover',
              label: '忘记密码hover',
              children:
                <StyleWrapper form={form} preKeys={['forget', 'hover']} onStyleChange={() => upateStyleEvent(['forget'])} />
            },
            {
              key: 'login_box',
              label: '登录盒子',
              children:
                <>
                  <Form.Item
                    label="文本"
                    name={['base', 'login_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['base', 'login_text'], e.target.value)}
                    />
                  </Form.Item>

                  <StyleWrapper form={form} preKeys={['login_box', 'default']} onStyleChange={() => upateStyleEvent(['login_box'])} />

                </>
            },
            {
              key: 'login',
              label: '登录',
              children:
                <StyleWrapper form={form} preKeys={['login', 'default']} onStyleChange={() => upateStyleEvent(['login'])} />
            },
            {
              key: 'login_hover',
              label: '登录hover',
              children:
                <StyleWrapper form={form} preKeys={['login', 'hover']} onStyleChange={() => upateStyleEvent(['login'])} />
            },
            {
              key: 'face_box',
              label: '人脸盒子',
              children:
                <>
                  <Form.Item
                    label="文本"
                    name={['base', 'face_text']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent(['base', 'face_text'], e.target.value)}
                    />
                  </Form.Item>

                  <StyleWrapper form={form} preKeys={['face_box', 'default']} onStyleChange={() => upateStyleEvent(['face_box'])} />

                </>
            },
            {
              key: 'face',
              label: '人脸',
              children:
                <StyleWrapper form={form} preKeys={['face', 'default']} onStyleChange={() => upateStyleEvent(['face'])} />
            },
            {
              key: 'face_hover',
              label: '人脸hover',
              children:
                <StyleWrapper form={form} preKeys={['face', 'hover']} onStyleChange={() => upateStyleEvent(['face'])} />
            },
          ]} />
      },
      {
        key: 'idea_1',
        label: '自定义盒子1',
        children:
          <>
            <Form.Item
              label="开关"
              name={['base', 'idea1_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'idea1_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>
            <Form.Item
              label="文本"
              name={['base', 'idea1_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'idea1_text'], e.target.value)}
              />
            </Form.Item>
            <StyleWrapper form={form} preKeys={['idea_1', 'default']} onStyleChange={() => upateStyleEvent(['idea_1'])} />

          </>
      },
      {
        key: 'idea_2',
        label: '自定义盒子2',
        children:
          <>
            <Form.Item
              label="开关"
              name={['base', 'idea2_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'idea2_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>
            <Form.Item
              label="文本"
              name={['base', 'idea2_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'idea2_text'], e.target.value)}
              />
            </Form.Item>
            <StyleWrapper form={form} preKeys={['idea_2', 'default']} onStyleChange={() => upateStyleEvent(['idea_2'])} />

          </>
      },
    ]

    return items
  }, [
    updateCtx.updateFlag
  ])



  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='login'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 6,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(LoginAttr) 